import React, { useState } from 'react';
import { Button, Form, Input, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { checkLogin } from "../../api/account";

export default function Login() {
    const navigate = useNavigate();

    const onFinish = async (values) => {
        let res = await checkLogin(values);
        let { code, msg } = res.data;
        if (code === 0) {
            let { id, role, token } = res.data;
            // 将用户数据 存储到本地==其他页面可以通过本地获取出来使用
            localStorage.setItem("user", JSON.stringify({ id, role, token }));
            message.success(msg)
            // 跳转首页
            navigate("/home");
        } else {
            message.error(msg)
        }
    };


    return (
        <>
            <div className="login-page">
                <div className="title">系统登录</div>
                <Form
                    name="normal_login"
                    className="login-form"
                    style={{
                        width: 400,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                >
                    <Form.Item
                        className='form-item'
                        name="account"
                        rules={[
                            {
                                required: true,
                                message: '请输入账号',
                            },
                        ]}
                    >
                        <Input
                            className='input-item'
                            placeholder='请输入账号'
                            prefix={<UserOutlined />}
                        />
                    </Form.Item>
                    <Form.Item
                        className='form-item'
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码',
                            },
                        ]}
                    >
                        <Input.Password
                            className='input-item'
                            placeholder='请输入密码'
                            prefix={<LockOutlined />}
                        />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit"
                            style={{
                                width: 400,
                                height: 30
                            }}>
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </>
    )
}
